<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例生成器</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2 sidebar">
                <div class="logo-container">
                    <i class="fas fa-vial fa-2x me-2"></i>
                    <h3>测试用例生成器</h3>
                </div>
                <div class="nav-links">
                    <div class="nav-item active" id="nav-generate">
                        <i class="fas fa-plus-circle"></i> 生成测试用例
                    </div>
                    <div class="nav-item" id="nav-upload">
                        <i class="fas fa-upload"></i> 加载已有用例
                    </div>
                    <div class="nav-item" id="nav-results">
                        <i class="fas fa-list"></i> 查看结果
                    </div>
                </div>
                <div class="footer">
                    <p>Powered by Flask & Ollama</p>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9 col-lg-10 main-content">
                <!-- 标题栏 -->
                <div class="header-bar">
                    <h1><i class="fas fa-vial"></i> 测试用例生成器</h1>
                </div>

                <!-- 生成表单部分 -->
                <div class="content-section" id="generate-section">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-plus-circle"></i> 生成新的测试用例</h3>
                        </div>
                        <div class="card-body">
                            <form id="generate-form">
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="name" class="form-label">场景名称 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="number" class="form-label">用例数量 <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" id="number" name="number" min="1" max="20" value="3" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="description" class="form-label">场景描述</label>
                                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="详细描述该功能的用途和业务场景"></textarea>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="test_type" class="form-label">测试用例类型</label>
                                        <select class="form-select" id="test_type" name="test_type">
                                            <option value="功能测试" selected>功能测试</option>
                                            <option value="性能测试">性能测试</option>
                                            <option value="自动化测试">自动化测试</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="priority_strategy" class="form-label">优先级策略</label>
                                        <select class="form-select" id="priority_strategy" name="priority_strategy">
                                            <option value="1" selected>基于重要性</option>
                                            <option value="2">全部高优先级(P0)</option>
                                            <option value="3">全部中优先级(P1)</option>
                                            <option value="4">全部低优先级(P2)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="id_prefix" class="form-label">ID前缀</label>
                                        <input type="text" class="form-control" id="id_prefix" name="id_prefix" placeholder="留空使用默认值F/P/A">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check form-switch mt-4">
                                            <input class="form-check-input" type="checkbox" id="generate_test_data" name="generate_test_data" checked>
                                            <label class="form-check-label" for="generate_test_data">生成测试数据</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-magic"></i> 生成测试用例
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 上传文件部分 -->
                <div class="content-section d-none" id="upload-section">
                    <div class="card">
                        <div class="card-header">
                            <h3><i class="fas fa-upload"></i> 加载已有测试用例</h3>
                        </div>
                        <div class="card-body">
                            <form id="upload-form">
                                <div class="mb-4">
                                    <label for="test-file" class="form-label">选择测试用例文件 (JSON)</label>
                                    <input class="form-control" type="file" id="test-file" name="file" accept=".json">
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-upload"></i> 上传并加载
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- 结果展示部分 -->
                <div class="content-section d-none" id="results-section">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between align-items-center">
                                <h3><i class="fas fa-list"></i> 测试用例结果</h3>
                                <div>
                                    <div class="btn-group me-2" role="group" aria-label="视图切换">
                                        <button id="view-card" class="btn btn-outline-primary active">
                                            <i class="fas fa-th-large"></i> 卡片视图
                                        </button>
                                        <button id="view-table" class="btn btn-outline-primary">
                                            <i class="fas fa-table"></i> 表格视图
                                        </button>
                                    </div>
                                    <button id="download-btn" class="btn btn-success">
                                        <i class="fas fa-download"></i> 下载JSON
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="results-container">
                                <div class="text-center py-5">
                                    <i class="fas fa-info-circle fa-2x text-muted"></i>
                                    <p class="mt-3">还没有生成测试用例</p>
                                </div>
                            </div>
                            
                            <!-- 表格视图容器 (默认隐藏) -->
                            <div id="table-container" class="d-none">
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>标题</th>
                                                <th>优先级</th>
                                                <th>级别</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="table-body">
                                            <!-- 表格内容将由JS动态生成 -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 加载中提示 -->
                <div class="loading-overlay d-none" id="loading-overlay">
                    <div class="spinner-container">
                        <div class="spinner-border text-light" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-light mt-3">正在生成测试用例，请稍候...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html> 